<template>
	<div class="main">
		<div class="innerCon">
			<div class="model_">
				<div style="display: flex;">
					<img src="http://photo.chaoxing.com/p/85018427_80" style="vertical-align: middle;" />
					<div class="fl" style="margin-left: 5.25rem;">
						<h2>{{PersonList.userName}}</h2>
						<span>{{PersonList.userNum}}</span>
					</div>
				</div>
				<div class="fr">
					<div class="time">
						<span class="num">{{PersonList.grade}}</span>
						<span class="fs16">分</span>
					</div>
				</div>
			</div>
			<div class="main_Item">
				<div class="left">
					<div class="left_Item">
						<h4 style="margin-left: 0.625rem;">章节任务点</h4>
						<div style="display: flex;justify-content:space-between;">
							<div style="margin-left: 0.925rem;">
								<div><span style="font-size: 1.6625rem;">{{PersonList.compOfChapter}}</span>/{{PersonList.sumOfChapter}}个</div>
								<div><span style="color: 15px;color:#787b7d;">完成进度</span></div>
							</div>
							<div style="margin-right: 0.925rem;">
								<div><span style="font-size: 1.6625rem;">1</span>名</div>
								<div><span style="color: 15px;color:#787b7d;">当前的排名</span></div>
							</div>
						</div>
					</div>
					<div id="main" ref="myChart1">
						<!-- 完成率99% -->
					</div>
				</div>
				<div class="right">
					<div class="right_Item1">
						<div class="Item" style="margin-right: 0.925rem;">
							<h4>作业</h4>
							<div style="display: flex;justify-content:space-between;">
								<div style="margin-left: 0.925rem;">
									<div><span style="font-size: 1.6625rem;">{{PersonList.compOfTask}}</span>/{{PersonList.sumOfTask}}</div>
									<div><span style="color: 15px;color:#787b7d;">完成进度</span></div>
								</div>
								<div style="margin-right: 0.925rem;">
									<div><span style="font-size: 1.6625rem;">{{PersonList.gradeOfTask}}</span>分</div>
									<div><span style="color: 15px;color:#787b7d;">成绩</span></div>
								</div>
							</div>
						</div>
						<div class="Item">
							<h4>考试</h4>
							<div style="display: flex;justify-content:space-between;">
								<div style="margin-left:0.925rem;">
									<div><span style="font-size: 1.6625rem;">{{PersonList.compOfExam}}</span>/{{PersonList.sumOfExam}}</div>
									<div><span style="color: 15px;color:#787b7d;">完成进度</span></div>
								</div>
								<div style="margin-right:0.925rem;">
									<div><span style="font-size: 1.6625rem;">{{PersonList.gradeOfExam}}</span>分</div>
									<div><span style="color: 15px;color:#787b7d;">成绩</span></div>
								</div>
							</div>
						</div>
					</div>
					<div class="right_Item">
						<h4 style="margin-left: 0.625rem">章节测验</h4>
						<div style="display: flex;justify-content:space-between;">
							<div style="margin-left:0.925rem;">
								<div><span style="font-size: 1.6625rem;">{{PersonList.comOfChapterTest}}</span>/{{PersonList.sumOfChapterTest}}</div>
								<div><span style="color: 15px;color:#787b7d;">完成进度</span></div>
							</div>
							<div style="margin-right:0.925rem;">
								<div><span style="font-size: 1.6625rem;">{{PersonList.gradeOfChapterTest}}</span>分</div>
								<div><span style="color: 15px;color:#787b7d;">成绩</span></div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
       
	</div>
</template>

<script>
	import {
		HttpManagerStudent
	}from"../../../request/student.js"
	export default {
		data(){
			return{
			courseId:localStorage.getItem("ClassId"),
			PersonList:[]
			}
		},
		mounted() {
			this.Init();
		},
		methods: {
			Init() {
				//基于准备好的DOM，初始化ECharts图表
				let myChart = this.$echarts.init(this.$refs.myChart1);
				//指定图表的配置项和数据
				var option = {
					title: {
						// text: '答题情况',
						x: '200px', //设置主标题全部居中
						// backgroundColor: '#B5A642', //设置主标题的背景颜色为黄铜色
						textStyle: { //设置主标题
							fontSize: 18, //设置主标题的字号大小
							fontFamily: "黑体", //设置主标题的字体
							color: "#5a5a5a" //设置主标题的颜色为深兰花色
						},
					},
					tooltip: { //配置提示框组件
						trigger: 'item', //设置提示框的触发方式
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: { //配置图例组件
						x: 'center',
						y: 'center',
						data: ['已完成', '未完成']
					},
					color: [' #eaeaea', '#03d3bd', ], //按顺序配置饼图内容颜色，渐变色的话要写出数组
					calculable: true,
					series: [ //配置数据系列及格式组件
						{
							name: '答题情况',
							type: 'pie', //饼图
							radius: ['60%', '100%'], //设置半径[内,外]
							center: ['100%', 90], //设置圆心坐标
							//roseType: 'radius',  //开启半径模式会变成玫瑰图，可以试一试
							width: '15%', // 改整个的大小
							max: 40, // for funnel 漏斗图
							itemStyle: {
								normal: {
									label: {
										show: false
									},
									labelLine: {
										show: true
									}
								},
								emphasis: {
									label: {
										show: true
									},
									labelLine: {
										show: true
									}
								}
							},
							data: [{
									value: 1,
									name: '未完成'
								},
								{
									value: 0,
									name: '已完成'
								},

							]
						},

					]
				};
				//使用刚指定的配置项和数据显示图表

				myChart.setOption(option);

			},
            //学生个人统计页面所需数据
			getPerSta()
			{
				var parmas={
					courseId:this.courseId
				}
				HttpManagerStudent.getPerSta(parmas).then(e=>{
					console.log(e);
					this.PersonList=e.data.data;
				})
			},
			
		},
		created()
		{
			this.getPerSta();
		}
	}
</script>

<style scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}

	.main {
		height: 100vh;
		background-color: #f4fafe;
	}

	.innerCon {
		width: 90%;
		margin: 0 auto;
		color: #000000;
	}

	.fl {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 1.25rem;
	}

	.innerCon .model_ img {
		width: 56px;
		height: 56px;
		border-radius: 28px;
		margin-top: 6px;
	}

	.model_ {
		height: 94px;
		padding: 30px 40px;
		width: 90%;
		border-radius: 5px;
		margin-top: 1.25rem;
		background-color: white;
		display: flex;
		justify-content: space-between;
		/* box-sizing: border-box; */
	}


	.time {
		font-weight: 400;
		color: #181E33;
		line-height: 22px;
		text-align: center;
		margin-bottom: 9px;
	}

	.num {
		font-size: 28px;
		font-weight: 500;
		color: #ff5500;
		font-family: D-DIN;
		line-height: 31px;
		margin-right: 4px;
	}

	.fs16 {
		font-size: 16px;
	}

	.main_Item {
		width: 100%;
		display: flex;
		margin-top: 2.25rem;
	}

	.left {
		width: 48%;
		height:25.75rem;
		margin-right: 1%;
		background-color: #ffffff;
		border-radius: 5px;
	}

	.right {
		width: 47%;
		height: 20.75rem;
		border-radius: 5px;
	}

	.right_Item {
		height: 13.5rem;
		width: 100%;
		border-radius: 5px;
		margin-bottom: 0.625rem;
		background-color: #ffffff;
	}

	.right_Item1 {
		height: 11.5rem;
		width: 100%;
		border-radius: 5px;
		margin-bottom: 0.625rem;
		display: flex;
		justify-content: space-between;
		/* background-color: #ffffff; */
	}

	.Item {
		background-color: white;

		height: 100%;
		width: 100%;
	}

	.Item>h4 {
		margin-left: 0.625rem;
	}
	#main {
		margin: 20px;
		width: 100%;
		height: 12.00rem;
	}
</style>
